<template>
    <div id="app">
        <BugHeader
                :saveBugCallback="saveBugCallback"

        ></BugHeader>
        <BugList

                :bugList="bugList"
                 :resolvedClickCallback="resolvedClickCallback"
                 :delCallback="delCallback"
                 :selectAllCallback="selectAllCallback"
                 :updateDesc="updateDesc"

        ></BugList>
        <BugFooter
                :bugList="bugList"
                :delResolved="delResolved"
        ></BugFooter>
    </div>
</template>

<script>
    import BugHeader from "./components/BugHeader.vue"
    import BugList from "./components/BugList.vue"
    import BugFooter from "./components/BugFooter.vue"

    export default {
        name: 'App',
        data() {
            return {
                bugList: [
                    {id: '001', desc: 'bug描述信息1', resolved: false},
                    {id: '002', desc: 'bug描述信息2', resolved: false},
                    {id: '003', desc: 'bug描述信息3', resolved: true},
                ]
            }
        },
        methods: {
            saveBugCallback(bug) {
                this.bugList.unshift(bug)
            },
            resolvedClickCallback(itemId) {
                this.bugList.forEach((item) => {
                    if (item.id === itemId) {
                        item.resolved = !item.resolved;
                    }
                })
            },
            delCallback(itemId) {
                this.bugList = this.bugList.filter((item) => {
                    if (item.id == itemId) {
                        if (!item.resolved) {
                            alert(item.id + ':任务没有完成哦')
                            return true
                        }
                        return false
                    }
                    return true
                });
            },
            selectAllCallback(value) {
                this.bugList.forEach((item) => {
                    item.resolved = value;
                })
            },
            delResolved(){
                this.bugList = this.bugList.filter((item) => {
                     return !item.resolved
                });
            },
            updateDesc(value,e){
                value.editState = false;
                let newDesc = e.target.value
                if(''==newDesc){
                    return
                }
                this.bugList.forEach((item)=>{
                    if(item.id===value.id){
                        item.desc = e.target.value

                        return
                    }
                })

            },

        },
        components: {
            BugHeader, BugList, BugFooter
        }
    }
</script>

<style>
    #app {
        /*font-family: Avenir, Helvetica, Arial, sans-serif;*/
        /*-webkit-font-smoothing: antialiased;*/
        /*-moz-osx-font-smoothing: grayscale;*/
        /*text-align: center;*/
        /*color: #2c3e50;*/
        /*margin-top: 60px;*/

    }
    button {
        display: inline-block;
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    input{
        width: 24px;
        height: 24px;
    }
</style>
